<template>
  <div id="app" style="font-size: 26px; font-weght: bold; margin: 30px 0">
    <header class="header">
      <div
        v-for="(item, index) in topInputList"
        :key="index"
        class="everyBox"
        v-if="index != 3"
      >
        <span class="span">{{ item.title }}：</span>
        <el-input
          placeholder=""
          v-model="item.text"
          :placeholder="item.title"
          class="top-input"
        ></el-input>
      </div>
      <div class="everyBox slelctBox">
        <span class="span">退货状态：</span>
        <el-select
          v-model="value1"
          placeholder="请选择"
          @change="opctionchangeOne"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin: 0 10px">
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="reset"
          >重置</el-button
        >
      </div>
      <div style="margin: 0 10px">
        <download-excel
          :fields="exportDataStandard"
          :data="multipleSelection"
          type="xls"
          :name="exportName"
          :defaultValue="exportDefaultValue"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button type="primary" icon="el-icon-download">导出</el-button>
        </download-excel>
      </div>
    </header>
    <div class="body">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="reship_id"
          label="退货单号"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="order_id"
          label="订单号"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="nickname"
          label="用户"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status_text"
          label="状态"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="aftersales_id"
          label="售后单号"
          width="170"
        >
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="img" label="完成照片">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="imgHeader + scope.row.img"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="maer_username"
          label="送水工"
          width="170"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="ctime" label="创建时间">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="utime" label="更新时间">
        </el-table-column>
        <!-- <el-table-column
          show-overflow-tooltip
          prop="date"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="checkOrder(scope.row)"  size="mini" >明细</el-button>
            <el-button @click="tuihuo(scope.row)"  size="mini" v-if="scope.row.status==1">退货</el-button>
            <el-button @click="queernshou(scope.row)"  size="mini" v-if="scope.row.status==2">确认收货</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="退货单查看"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-descriptions title="" :column="2">
        <el-descriptions-item label="退货单号">{{
          orderDetails.reship_id
        }}</el-descriptions-item>
        <el-descriptions-item label="订单号">{{
          orderDetails.order_id
        }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{
          orderDetails.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          orderDetails.status_text
        }}</el-descriptions-item>
        <el-descriptions-item label="退货方式">{{
          orderDetails.logi_code
        }}</el-descriptions-item>
        <el-descriptions-item label="物流单号">{{
          orderDetails.logi_no
        }}</el-descriptions-item>
        <el-descriptions-item label="商品信息">
          <el-table
            :data="orderDetails.items"
            style="width: 100%"
            border
            height="97"
          >
            <el-table-column show-overflow-tooltip prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="nums" label="退货数量"> </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog
      title="确认退货"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose2"
    >
      <el-descriptions title="" :column="2">
        <el-descriptions-item :span="2" label="状态">{{
          orderDetails.status_text
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="contentBox">
        <div class="everyBox">
          <span class="span">物流单号:</span>
          <el-input placeholder="" v-model="orderDetails.logi_no"></el-input>
        </div>
        <div class="everyBox">
          <span class="span">物流方式:</span>
          <el-input placeholder="" v-model="orderDetails.logi_code"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="(dialogVisible2 = false), (orderDetails = {})"
          >取 消</el-button
        >
        <el-button type="primary" @click="saveDialog2">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="确认收货"
      :visible.sync="dialogVisible3"
      width="30%"
      :before-close="handleClose3"
    >
      <el-descriptions title="" :column="2">
        <el-descriptions-item label="退货单号">{{
          orderDetails.reship_id
        }}</el-descriptions-item>
        <el-descriptions-item label="订单号">{{
          orderDetails.order_id
        }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{
          orderDetails.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          orderDetails.status_text
        }}</el-descriptions-item>
        <el-descriptions-item label="退货方式">{{
          orderDetails.logi_code
        }}</el-descriptions-item>
        <el-descriptions-item label="物流单号">{{
          orderDetails.logi_no
        }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="(dialogVisible3 = false), (orderDetails = {})"
          >取 消</el-button
        >
        <el-button type="primary" @click="saveDialog3">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  returnGoods,
  verifyExitGoods,
  verifyReceiveGoods,
} from "../../../../utils/api";

export default {
  name: "returnGoods",
  data() {
    return {
      imgHeader: this.Global.imgHeader,

      exportDataStandard: {
        退货单号: "reship_id",
        订单号: "order_id",
        用户: "nickname",
        状态: "status_text",
        售后单号: "aftersales_id",
        退货方式: "logi_code",
        物流单号: "logi_no",
        创建时间: "ctime",
        更新时间: "utime",
      },
      exportName: "导出订单",
      // exportDefaultValue: "这一行这一列没有数据",
      exportDefaultValue: " ",

      multipleSelection: [],
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      topInputList: [
        { title: "退货单号", text: "" },
        { title: "订单号", text: "" },
        // { title: "用户手机号", text: "" },
        // { title: "物流单号", text: "" },
        { title: "售后单号", text: "" },
      ],
      options1: [
        {
          value: "1",
          label: "待退货",
        },
        {
          value: "2",
          label: "运输中",
        },
        {
          value: "3",
          label: "已收退货",
        },
      ],
      value1: "",
      loading: true,
      tableData: [],
      limit: 10,
      currentPage: 1,
      total: 0,
      reship_id: "",
      order_id: "",
      aftersales_id: "",
      logi_no: "",
      // mobile: "",
      status: "", //status售后状态 1=未审核 2=审核通过 3=审核拒绝'
      orderDetails: {},
    };
  },
  methods: {
    createExportData() {
      return this.multipleSelection;
    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    startDownload() {
      console.log();
      if (this.multipleSelection.length <= 0) {
        this.$message("请选择要下载的数据");
      } else {
        this.$message("下载中···");
      }
    },
    finishDownload() {
      this.$message({
        message: "下载成功",
        type: "success",
      });
      // 下载成功取消选择
      this.toggleSelection();
    },
    checkOrder(row) {
      this.dialogVisible = true;
      this.orderDetails = row;
    },
    tuihuo(row) {
      this.dialogVisible2 = true;
      this.orderDetails = row;
      // console.log(this.orderDetails)
    },
    saveDialog2() {
      this.$confirm("确认操作？")
        .then((_) => {
          if (
            (this.orderDetails.logi_no == "") |
            (this.orderDetails.logi_no == null)
          ) {
            this.$message.error("请输入物流单号");
            return;
          }
          if (
            (this.orderDetails.logi_code == "") |
            (this.orderDetails.logi_code == null)
          ) {
            this.$message.error("请输入物流方式");
            return;
          }
          verifyExitGoods(
            this.token,
            this.orderDetails.reship_id,
            this.orderDetails.logi_code,
            this.orderDetails.logi_no
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getList(
                this.token,
                this.currentPage,
                this.limit,
                this.reship_id,
                this.order_id,
                this.aftersales_id,
                this.logi_no,
                // this.mobile,
                this.status
              );
            } else {
              this.$message.error(res.data.msg);
              if (res.data.msg == "token失效,请重新进行登录") {
                this.$router.push("/login");
              }
            }
            this.dialogVisible2 = false;
            this.orderDetails = {};
          });
        })
        .catch((_) => {});
    },
    saveDialog3() {
      verifyReceiveGoods(this.token, this.orderDetails.reship_id).then(
        (res) => {
          if (res.data.data.status) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getList(
              this.token,
              this.currentPage,
              this.limit,
              this.reship_id,
              this.order_id,
              this.aftersales_id,
              this.logi_no,
              // this.mobile,
              this.status
            );
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            this.$message.error(res.data.msg);
          }
          this.dialogVisible3 = false;
          this.orderDetails = {};
        }
      );
    },

    queernshou(row) {
      this.dialogVisible3 = true;
      this.orderDetails = row;
    },
    handleClose() {
      this.dialogVisible = false;
      this.orderDetails = {};
    },
    handleClose2() {
      this.dialogVisible2 = false;
      this.orderDetails = {};
    },
    handleClose3() {
      this.dialogVisible3 = false;
      this.orderDetails = {};
    },
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.reship_id,
        this.order_id,
        this.aftersales_id,
        this.logi_no,
        // this.mobile,
        this.status
      );
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.reship_id,
        this.order_id,
        this.aftersales_id,
        this.logi_no,
        // this.mobile,
        this.status
      );
    },
    reset() {
      this.reship_id = "";
      this.topInputList[0].text = "";
      this.order_id = "";
      this.topInputList[1].text = "";
      // this.mobile = this.topInputList[2].text
      this.logi_no = "";
      this.aftersales_id = "";
      this.topInputList[2].text = "";
      this.value1 = "";
      this.status = "";
      this.getList(
        this.token,
        1,
        this.limit,
        this.reship_id,
        this.order_id,
        this.aftersales_id,
        this.logi_no,
        // this.mobile,
        this.status
      );
    },
    search() {
      this.reship_id = this.topInputList[0].text;
      this.order_id = this.topInputList[1].text;
      // this.mobile = this.topInputList[2].text
      this.logi_no = "";
      this.aftersales_id = this.topInputList[2].text;
      this.currentPage = 1;
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.reship_id,
        this.order_id,
        this.aftersales_id,
        this.logi_no,
        // this.mobile,
        this.status
      );
    },
    opctionchangeOne(e) {},

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getList(
      token,
      page,
      limit,
      reship_id,
      order_id,
      aftersales_id,
      logi_no,
      // mobile,
      status
    ) {
      this.loading = true;
      returnGoods(
        token,
        page,
        limit,
        reship_id,
        order_id,
        aftersales_id,
        logi_no,
        // mobile,
        status,
        12
      ).then((res) => {
        if (res.data.status) {
          // console.log(res.data.data)
          this.tableData = res.data.data.data;
          this.total = res.data.data.count;
          this.tableData.forEach((item) => {
            if (item.status == 1) {
              item.status_text = "待退货";
            }
            if (item.status == 2) {
              item.status_text = "运输中";
            }
            if (item.status == 3) {
              item.status_text = "已收退货";
            }
          });
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.$message.error(res.data.msg);
          this.loading = false;
        }
      });
    },
    derive() {},
  },
  created() {
    this.getList(
      this.token,
      this.currentPage,
      this.limit,
      this.reship_id,
      this.order_id,
      this.aftersales_id,
      this.logi_no,
      // this.mobile,
      this.status
    );
  },
  watch: {
    value1(n, o) {
      if (n == 111) {
        this.value1 = "";
      }
      this.status = this.value1;
    },
  },
};
</script>

<style scoped>
.body {
  margin: 20px 0;
}
.slelctBox {
  margin: 0 10px;
}
.everyBox {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.header .span {
  font-size: initial;
}
.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.top-input {
  width: 150px;
  margin-right: 20px;
}
.el-table th.el-table__cell > .cell {
  text-align: center;
}
.el-table .cell.el-tooltip {
  text-align: center;
}
.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
.contentBox {
  width: 50%;
}
.contentBox .span {
  width: 40%;
}
</style>
